<template>
  <div class="files-group-box" :class="[isModal?'is-modal':'']">
    <div class="files-group-box-head">
      <div  v-if="!isModal">分组</div>
      <el-button
        type="primary"
        :size="isModal?'small':'default'"
        @click="createClick(0,'')"
        v-permission="'mate-files_group-create'"
        >新增分组</el-button
      >
    </div>
    <div class="files-group-list" v-loading="groupLoading">
      <div class="files-group-item"  :class="-1 == selectedGroupId?'is-active':''" @click="selectedGroup(-1,'全部')">
        <div class="files-group-name">
          <el-icon><Folder /></el-icon>
          <div :class="isModal?'ml5':'ml10'">全部</div>
        </div>
      </div>
      <div class="files-group-item"  :class="0 == selectedGroupId?'is-active':''" @click="selectedGroup(0,'未分组')">
        <div class="files-group-name">
          <el-icon><Folder /></el-icon>
          <div :class="isModal?'ml5':'ml10'">未分组</div>
        </div>
      </div>
      <template v-for="(item, index) in groupList" :key="index">
        <div class="files-group-item" :class="item.id == selectedGroupId?'is-active':''"  @click.stop="selectedGroup(item.id,item.group_name )">
          <div class="files-group-name">
            <el-icon><Folder /></el-icon>
            <div :class="isModal?'ml5':'ml10'" class="files-group-name-text">{{ item.group_name }}</div>
          </div>
          <div class="files-group-item-action" >
            <i class="icon icon-update" v-if="isModal" v-permission="'mate-files_group-update'" @click="createClick(item.id,item.group_name)"></i>
            <el-button link type="primary"  v-else v-permission="'mate-files_group-update'" @click="createClick(item.id,item.group_name)">编辑</el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="不用了"
              icon="WarningFilled"
              icon-color="red"
              title="确定删除吗？"
              @confirm="del(item.id)"
            >
              <template #reference>
                <i class="icon icon-delete ml5" v-if="isModal"></i>
                <el-button link type="primary" v-permission="'mate-files_group-delete'" v-else>删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </template>
    </div>
    <!-- 添加 -->
    <mateFilesGroupCreate
      ref="createComponentRef"
      @success="toInit()"
    ></mateFilesGroupCreate>
  </div>
</template>
<script lang="ts">
export default {
  name: "mateFilesGroup",
};
</script>
  <script lang="ts" setup>
import { ref, reactive, onMounted,getCurrentInstance } from "vue";
import mateFilesGroupCreate from "./create.vue";
import { getGroupList,delGroup } from "@/api/mate/files";
import type { Result ,ResultError } from "@/types"
import { setgroups } from "process";
const { proxy } = getCurrentInstance() as any
const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    isModal?:boolean;
    width?: string;
  }>(),
  {
    isModal:false,
    width: "386px",
  }
);

const selectedGroupId = ref<number|string>(-1);

const emit = defineEmits(["change","initChange"]);

const createComponentRef = ref<HTMLElement>();

const groupList  = ref<any>([]);

const groupLoading = ref<boolean>(false);

const toInit = () => {
  groupLoading.value = true;
  getGroupList({})
    .then((res:Result) => {
      groupList.value = res.data;
      emit('initChange',groupList.value);
      setTimeout(() => {
        groupLoading.value = false;
      }, 100);
    })
    .catch((err:ResultError) => {
      $utils.errorMsg(err)
    });
};

const createClick = (id:number | string,group_name:string) => {
  proxy?.$refs['createComponentRef']?.open(id,group_name);
}


const del = (id: number) => {
  delGroup({
    group_id:id,
  })
    .then((res: Result) => {
      emit("change",{group_id:-1,group_name:'全部'})
      toInit();
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const selectedGroup = (val:number | string,title:string) => {
  selectedGroupId.value = val
  emit("change",{group_id:val,group_name:title})
}

onMounted(() => {
  toInit();
});
</script>
  <style scoped>
  ::-webkit-scrollbar{width:6px;}
  ::-webkit-scrollbar-track{background:#fff}
  ::-webkit-scrollbar-thumb{background-color:#c6c6c6}
.files-group-box {
  flex: 0 0 386px;
  width: 386px;
  height:100%;
  background: #fff;
  border: 1px solid var(--el-border-color);
  border-radius: 2px;
}
.files-group-box.is-modal{
  flex: 0 0 160px;
  width: 160px;
  height:100%;
}
.files-group-box-head {
  padding: 0 20px;
  height: 45px;
  background: var(--el-fill-color-lighter);
  text-align: left;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--el-border-color);
  align-items: center;
}
.files-group-box.is-modal .files-group-box-head {
  background: none;
}
.files-group-list {
  overflow: auto;
  position: relative;
  height: calc(100% - 50px);
}
.files-group-item {
  padding: 0 10px;
  text-align: left;
  position: relative;
  height: 48px;
  line-height: 48px;
  width: calc(100% - 20px);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  user-select: none;
}
.files-group-name {
  display: flex;
  align-items: center;
  width: calc(100% - 120px);
}
.files-group-name .files-group-name-text{

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.files-group-box.is-modal .files-group-name  {
  width:calc( 100% - 50px);
}
.files-group-item:hover,
.files-group-item.is-active {
  background: var(--el-color-primary-light-9);
}
.files-group-item-action{
  display: none;
  align-items: center;
}
.files-group-item:hover .files-group-item-action,
.files-group-item.is-active .files-group-item-action{
  display: flex;
  color: var(--base-default);
}
</style>
  